<template>
  <div>
    <a-modal :title="$t('user.verification-code.required111566110577123')" :visible="createVisible" centered @ok="submitCreate" @cancel="createVisible = false" :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')"
      width="406px">
      <a-form layout="inline" class="drawer-form">
        <a-form-item :label=" $t('user.verification-code.required111566110577120')">
         <span> {{$t('user.verification-code.required111566110577121')}}：</span><a-input v-model="content" :label="$t('user.verification-code.required111566110577120')" :placeholder="$t($t('user.verification-code.required111566110577120'))" style="width: 284px;"/>
         <br>
         <span>{{ $t('user.verification-code.required111566110577122') }}</span>：<a-input v-model="contentying" :label="$t('user.verification-code.required111566110577120')" :placeholder="$t($t('user.verification-code.required111566110577120'))" style="width: 284px;" />
        </a-form-item>
        <br />
        <a-form-item :label=" $t('user.verification-code.required111566110577124') " v-if="typeInfo != ''">
          {{ typeInfo }}
        </a-form-item>
      </a-form>
    </a-modal> 
  </div>
</template>
<script>
import { sourceChange, sourceCreate, sourceSuperior } from '@/api/dcc'
export default {
  data() {
    return {
      content: '',
      contentying:'',
      createVisible: false,
      id: "",
      typeInfo: "",
      jobs: ""
    };
  },
  methods: {
    open() {
      this.createVisible = true;
      this.content = ""
      this.contentying=""
      this.jobs = "create"
    },
    async insert(source) {
      this.typeInfo = ""
      this.content = ""
      this.contentying=""
      this.createVisible = true;
      this.superior = source.SourceSuperior
      this.id = source.Id
      this.jobs = "insert"

      const { data } = await sourceSuperior({ id: source.Id })
      try {
        if (data[0].value != "") {
          this.typeInfo = data[0].value + "->" + source.SourceName
        }
      } catch (error) {
        this.$message.error(error)
      }
    },
    edit(data) {
      console.log(data);
      this.id = data.Id
      this.content = data.SourceName
      this.contentying=data.SourceNameEn
      this.superior = data.SourceSuperior
      this.createVisible = true;
      this.jobs = "change"
    },
    async submitCreate() {
      if (this.jobs == "create") {
        try {
          this.content = encodeURIComponent(this.content)
          this.contentying = encodeURIComponent(this.contentying)
          await sourceCreate({ SourceName: this.content, SourceNameEn:this.contentying,SourceSuperior: 0 })
          this.createVisible = false;
          this.$emit('succeed')
          this.$message.success(this.$t('user.verification-code.required111566110577222'));
        } catch (error) {
          this.$message.error(error)
        } finally {
        }
      } else if (this.jobs == "insert") {
        try {
          this.content = encodeURIComponent(this.content)
          this.contentying = encodeURIComponent(this.contentying)
          await sourceCreate({ SourceName: this.content, SourceNameEn:this.contentying,SourceSuperior: this.id })
          this.createVisible = false;
          this.$emit('succeed')
          this.$message.success(this.$t('user.verification-code.required111566110577222'));
        } catch (error) {
          this.$message.error(error)
        } finally {
        }
      } else {
        try {
          this.content = encodeURIComponent(this.content)
          this.contentying = encodeURIComponent(this.contentying)
          await sourceChange({ SourceName: this.content, SourceNameEn:this.contentying,id: this.id, SourceSuperior: this.superior })
          this.createVisible = false;
          this.$emit('succeed')
          this.$message.success(this.$t('user.verification-code.required111566110577222'));
        } catch (error) {
          this.$message.error(error)
        } finally {
        }
      }
    }
  },
};
</script>
<style lang="less" scoped></style>